// 博客组件。是博客详情和博客用户信息的父组件
import React, {Component} from 'react';
import BlogDetail from './BlogDetail'
import UserInfo from './UserInfo'
import LifeCircle2 from './LifeCircle2.js'
export default class Blog extends React.Component {
  constructor() {
    super();
    this.state = {
      age: 18,
      // 控制组件是否显示
      show: true
    }
  }
  // 切换组件的显示
  changeShow() {
    this.setState({
      show: !this.state.show
    })
  }
  // 修改info1
  changeInfo() {
    this.setState({
      age: 20
    })
  }
  render () {
    // 这是父组件，里面有BlogDetail和UserInfo两个子组件
    return (<div>
      <UserInfo></UserInfo>
      <BlogDetail></BlogDetail>
      <hr />
      {this.state.show && <LifeCircle2 info={this.state.age}></LifeCircle2>}
      <button onClick={() => this.changeInfo()}>修改info1</button>
      <button onClick={this.changeShow.bind(this)}>切换组件的显示</button>
      <hr />
    </div>)
  }
}